<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, viewport-fit=cover, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <title>完善资料</title>
    <script type="text/javascript" src="../lib/iview/vue.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/axios.ubi.js"></script>

</head>
<body>
<style type="text/CSS">
    .roundedRectangle {
        margin: 10px 10px 0 10px;
        background: #FFFFFF; /*背景色*/
        border-width: 10px; /*边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左*/
        border-style: solid;
        border-radius: 15px; /*圆角的大小*/
        border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; /*边框颜色，依次为上、右、下、左*/
    }

    .roundedRectangle p {
        margin: 0 auto;
        padding: 20px;
        text-align: center;
        font-size: 20px;
        letter-spacing: 8px;
    }

    .vertical-layout {
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .radius-layout {
        border-radius: 50%;
        border: 1px solid white;
        height: 22px;
        width: 22px;
        display: inline-block;
        color: #FFFFFF;
        line-height: 22px;
        text-align: center
    }

    .center {
        display: flex;
        justify-content: space-between;
        /*align-items: center;*/
        width: 100%;
        /*height: 20%;*/
        padding-top: 30px;
        /*background-image: url('../img/ubi/bg.png');*/
        background-color: #32C699;
    }

    .line-layout {
        height: 1px;
        width: calc(70% - 84px - 22px);
        border: none;
        border-top: 1px solid white;
        margin-top: 11px;
        margin-left: calc(15% + 42px + 11px);
    }

    .btn {
        /*position: absolute;*/
        text-align: center;
        bottom: 0;
        font-size: 18px;
        color: #FFFFFF;
        margin: 25px 35px 25px 35px;
        width: calc(100% - 70px);
        height: 50px;
        line-height: 45px;
        border-radius: 50px;
        background-color: #32C699;
        /*left: 50%;*/
        /*transform: translateX(-50%);*/
    }

    .text-key {
        font-size: 14px;
        /*color: #999999;*/
    }

    html, body {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        font-family: PingFangSC-Regular, PingFang SC;
        background-color: #F1F3F6;
        background-size: 100% 100%;
        background-position: center;
    }

</style>
<div id="app">
    <div>
        <div class="center">
            <div class="vertical-layout" style="margin-left: 42px">
            <span class="radius-layout">
                <span style="display: block;color: #FFFFFF;height: 22px;line-height: 22px;text-align: center">1</span>
            </span>
                <p style="font-size: 16px;color: #FFFFFF;">车主信息</p>
            </div>

            <div class="vertical-layout" style="margin-right: 42px">
            <span class="radius-layout">
                <span style="display: block;color: #FFFFFF;height: 22px;line-height: 22px;text-align: center">2</span>
            </span>
                <p style="font-size: 16px;color: #FFFFFF;">行驶证信息</p>
            </div>
        </div>

        <div style="float: left;width: 100%;margin-top: -80px">
            <hr class="line-layout"/>
        </div>
    </div>

    <van-form @submit="onSubmitOwnerInfo">
        <div class="roundedRectangle">
            <van-field
                    ref="vehicleNum"
                    v-model="vehicleNum"
                    label=" 车牌号码"
                    class="text-key"
                    required
                    maxlength="10"
                    name="车牌号码"
                    placeholder="请输入车牌号码"
                    input-align="right"
                    :rules="[{ required: true }]"></van-field>
            <van-cell
                    title="城市"
                    :value="value"
                    @click="showPicker = true"
                    is-link="true"
                    class="text-key"></van-cell>
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker
                        title="所在地区"
                        show-toolbar
                        :columns="columns"
                        default-index="1"
                        style="font-size: 50px"
                        @cancel="showPicker = false"
                        @confirm="onConfirm"></van-picker>
            </van-popup>
        </div>
        <div class="roundedRectangle">
            <van-row type="flex" justify="space-between">
                <van-col style="font-size: 16px;"><b>车主信息</b></van-col>
                <van-col
                        style="width:77px;height:20px;font-size: 12px;color: #32C699;background-image: url('./images/auto_fill_border.png');
                        background-size: 100% 100%;display: flex; flex-direction: row; align-items: center;padding: 8px "
                        @click="onAutoFill">
                    <van-image width="12" height="12" fit="contain"
                               src="./images/auto_fill_icon.png"></van-image>
                    <span style="color:#32C699;font-size: 12px">自动填写</span>
                </van-col>
            </van-row>

            <van-divider :style="{ color: '#DFDFDF', borderColor: '#DFDFDF' }"></van-divider>
            <van-field
                    v-model="ownerName"
                    name="姓名"
                    label="姓名"
                    class="text-key"
                    maxlength="30"
                    required
                    placeholder="请输入姓名"
                    input-align="right"
                    :rules="[{ required: true }]"></van-field>
            <van-field
                    ref="ownerIdCard"
                    v-model="ownerIdCard"
                    name="身份证"
                    label="身份证"
                    class="text-key"
                    input-align="right"
                    required
                    placeholder="请输入身份证号"
                    :rules="[{ required: true }]"></van-field>
            <van-field
                    ref="ownerPhoneNo"
                    v-model="ownerPhoneNo"
                    type="tel"
                    name="手机号"
                    label="手机号"
                    class="text-key"
                    input-align="right"
                    required
                    placeholder="请输入手机号"
                    :rules="[{ required: true }]"></van-field>
        </div>
        <van-button round block color="#32C699" native-type="submit" class="btn">提交</van-button>
    </van-form>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                active: 1,
                vehicleNum: '',
                ownerName: '',
                ownerIdCard: '',
                ownerPhoneNo: '',
                showPicker: false,
                columns: ['辽宁省    大连', '河北省    邯郸'],
                cityIds: ["1771", "1621"],
                value: '河北省    邯郸',
                cityId: '1621',
                phoneNo: '13284243992',
                activityId: '',
            };
        },
        mounted() {
          //  this.getPassParams();
        },
        methods: {
            getUserParams() {
                this.phoneNo = this.convertParam("phoneNo");
            },
            onConfirm(value, index) {
                console.log("select:", value, "==cityId:", this.cityIds[index]);
                this.value = value;
                this.showPicker = false;
                this.cityId = this.cityIds[index]
                this.getActivityData();
            },
            onChange(picker, value, index) {
                // Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                // Toast('取消');
            },
            onSubmitOwnerInfo(values) {
                if (!this.isVehicleNumber(this.vehicleNum)) {
                    vant.Toast('车牌号格式错误');
                    this.$refs.vehicleNum.focus();
                    return;
                }
                if (!this.checkIdCard(this.ownerIdCard)) {
                    vant.Toast('身份证号码格式错误');
                    this.$refs.ownerIdCard.focus();
                    return;
                }
                if (!this.checkPhoneNo(this.ownerPhoneNo)) {
                    vant.Toast('手机号码格式不正确');
                    this.$refs.ownerPhoneNo.focus();
                    return;
                }
                console.log('submit', values);
                location.href = encodeURI("./drivingLicense.html?" + "vehicleNum=" + this.vehicleNum + "&name=" + this.ownerName + "&idCard=" + this.ownerIdCard
                    + "&phoneNo=" + this.ownerPhoneNo + "&cityId=" + this.cityId + "&activityId=" + this.activityId);
            },
            checkPhoneNo(phoneNo) {
                var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
                return phoneReg.test(phoneNo);
            },
            isVehicleNumber(vehicleNumber) {
                var result = false;
                if (vehicleNumber.length === 7) {
                    var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
                    result = express.test(vehicleNumber);
                }
                return result;
            },
            checkIdCard(idNumber) {
                //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
                var express = /^\d{17}[\d|X]$|^\d{15}$/;
                return express.test(idNumber);
            },
            onAutoFill() {
                axios.get(`/hkr-na/api/v1/users_phone/phone_no=${this.phoneNo}`)
                    .then(function (response) {
                        if (response.data.code === 0 && response.data.payload) {
                            // vant.Toast('获取用户信息成功');
                            this.ownerName = response.data.payload.name;
                            this.ownerIdCard = response.data.payload.interimIdCardNumber;
                            this.ownerPhoneNo = response.data.payload.userName;
                        } else {
                            vant.Toast('获取用户信息失败');
                        }
                    }.bind(this))
                    .catch(function (err) {
                        console.log(err);
                        vant.Toast('网络异常，请稍后再试');
                    });
            },
            getActivityData() {
                const self = this;
                axios.get(`/hkr-cm/api/v1/activity/city_id=${this.cityId}`)
                    .then(function (response) {
                        if (response.data.code === 0 && response.data.payload && response.data.payload.id) {
                            vant.Toast('城市切换成功');
                            console.log("activityId", response.data.payload.id)
                            self.activityId = response.data.payload.id;
                        } else {
                            vant.Toast('当前选择城市暂未开启该活动');
                        }
                    }.bind(this))
                    .catch(function (err) {
                        console.log(err);
                        vant.Toast('网络异常，请稍后再试');
                    });
            }
        },
    });
</script>
</html>
